Creating Triangle or Arrow Shapes with ::before and ::after in CSS
You can create triangle or arrow shapes using only CSS by leveraging pseudo-elements with borders. By setting the width and height to 0 and applying different border colors, you can make triangles pointing in various directions.
Triangles are made by setting
widthandheightto 0 and applyingborderproperties.The color of the visible border determines the triangle's color; other borders are set to
transparent.Use
::beforeor::afterpseudo-elements to add arrows or triangles without extra HTML.Position the pseudo-element relative to the parent element to place the arrow as needed.
In this example, the ::after pseudo-element creates a black downward-pointing arrow below the .arrow element. The arrow is formed using CSS borders and requires no extra HTML elements.
Use pseudo-elements for decorative arrows or pointers instead of adding extra HTML markup.
Adjust border sizes and colors to control the direction and appearance of the triangle.
Combine with
positionandtransformto precisely place the arrow relative to the parent.Test across browsers to ensure the borders render correctly for different arrow directions.